<template>
  <div>
    <div class="head linear-bg-blue">
      <div class="seek">
        <img
          src="https://akk.028wkf.cn/kdb-weapp-img/img/ss.png"
          alt
          class="seekIoc"
        />
        <input
          v-model="seekModel"
          type="text"
          :value="seekModel"
          @change="seekChage"
          class="seekInput"
          placeholder="请输入单号/手机号"
        />
        <img
          src="https://akk.028wkf.cn/kdb-weapp-img/icon/kdb.png"
          alt
          class="seekLogo"
          @click="seekClick"
        />
      </div>
    </div>
    <!-- 商铺列表 -->
    <div class="tabInfo">
      <div>
        <i-tabs :current="current " @change="handleChange">
          <i-tab key="tab1" title="待付款"></i-tab>
          <i-tab key="tab2" title=" 待发货"></i-tab>
          <i-tab key="tab3" title="已收货"></i-tab>
          <i-tab key="tab4" title="退款/售后"></i-tab>
          <i-tab key="tab5" title="分销"></i-tab>
        </i-tabs>
      </div>
      <scroll-view
        scroll-y
        style="height:520px;background:#f4f4f4"
        @scrolltolower="handleLoadMore"
      >
        <div
          class="shopsList"
          v-for="(item,index) in list"
          :key="index"
          @click="shopInfo(item)"
        >
          <div class="shopsListLeft">
            <div class="shopsCont">
              <span>订单类型：{{shopForm[item.orderType]}}</span>
              <span>
                订单金额：
                <span class="money">￥{{item.discount}}</span>
              </span>
              <span>订单号：{{item.orderNo}}</span>
            </div>
          </div>
          <div class="shopsIcoBox">
            <!-- <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" alt> -->
            <div>
              <label>{{item.orderDate}}</label>
              <p v-if="item.addressContact">用户：{{item.addressContact}}</p>
              <span
                :class="item.state === '1' ? 'stateColor' : 
                  item.state === '0' ? 'stateColor' : 
                  item.state === '3'? 'stateColor2' :
                  item.state === '7'? 'stateColor2' :
                  item.state === '4'? 'stateColor' : 
                  item.state === '2'? 'stateColor' : 
                  item.state === '5' ? 'stateColor2' : 'stateColor3'"
              >
                {{
                (item.state === '1' && item.shippingMode === '0') ? ('待发货') :
                (item.state === '1' && item.shippingMode === '1') ? ('待核销') :
                (item.state === '1' && item.shippingMode === '2') ? ('待核销') :
                (item.state === '3' && (item.shippingMode === '1' || item.shippingMode === '2')) ? ('已核销') :
                (item.state === '7' && item.shippingMode === '0') ? ('已评价') :
                ((item.state === '3' || item.state === '7') && item.shippingMode === '3') ? ('已消费') :
                (item.state === '1') ? ('待发货') :
                (item.state === '2') ? ('已取消') :
                (item.state === '0') ? ('待付款') :
                (item.state === '4') ? ('待退款') :
                (item.state === '3') ? ('已收货') :
                (item.state === '7') ? ('已收货') :
                (item.state === '5') ? ('已退款') :
                (item.state === '8') ? ('已拒绝') : ('其他')
                }}
              </span>
            </div>
          </div>
          <div class="shopsXian"></div>
        </div>
        <div v-if="isShow" class="listHiti">没有更多了</div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import { formatNumber2 } from '@/utils'
import { FIND_SHOP_ORDER_PAGE } from '@/api'

export default {
  components: {},
  data () {
    return {
      seekModel: '', // 搜索框
      current: 'tab1', // 初始化tab选项
      pageNo: 1,
      pageSize: 10,
      pagesNum: 0, // 翻页总数
      pagesNumCunt: 0, // list记录数
      isShow: false,
      orderList: [], // 真家伙
      shopForm: {
        shop: '普通订单',
        platform: '平台订单',
        offline: '线下订单',
        group: '拼团订单',
        dis: '分销订单'
      },
      orderStates: {
        0: { text: '待付款', type: 'danger' },
        1: { text: '待收货', type: 'warning' },
        2: { text: '已取消', type: 'info' },
        3: { text: '交易完成', type: 'success' },
        4: { text: '退款中', type: 'warning' },
        5: { text: '退款完成', type: 'primary' },
        6: { text: '用户删除', type: 'info' },
        7: { text: '已评价', type: 'info' },
        8: { text: '拒绝退款', type: 'warning' }
      }
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    list () {
      return this.orderList.map(_ => ({
        ..._,
        orderDate: _.orderDate.slice(0, 10),
        account: formatNumber2(_.account),
        realName: _.realName ? _.realName.substr(0, 1) + '**' : '不详'
      }))
    }
  },
  onShow () {
    if (!this.isShow) {
      this.tabsInit()
    }
  },
  onUnload () {
    this.onUnInit()
  },
  created () {},
  methods: {
    seekChage (e) {
      this.seekModel = e.mp.detail.value
    }, // change监听搜索框
    seekClick () {
      const vm = this
      vm.seekShopList(vm.seekModel)

      // if (vm.seekModel === '') {
      //   vm.smallHintFrame('还没有要搜索的内容呢~~~')
      // } else {
      //   // 发请求拉
      //   vm.seekShopList(vm.seekModel)
      // }
    }, // 搜索按钮
    handleChange (e) {
      const vm = this
      if (vm.current !== e.mp.detail.key) {
        vm.pageNo = 1
        vm.pagesNumCunt = 0
        vm.isShow = false
        vm.orderList = []
      }
      vm.current = e.mp.detail.key
      vm.hanTabs()
    }, // 标签页
    shopInfo (item) {
      const vm = this
      if (vm.current === 'tab5') {
        this.$router.push(
          `/pages/shop-management/shop-order-info/main?orderNo=${
            item.orderNo
          }&isDis=1`
        )
      } else {
        this.$router.push(
          `/pages/shop-management/shop-order-info/main?orderNo=${item.orderNo}`
        )
      }
    }, // 每条详情
    tabsInit () {
      const vm = this
      if (vm.orderList.length <= 0) {
        if (
          vm.$root.$mp.query.val !== undefined &&
          vm.$root.$mp.query.val !== ''
        ) {
          vm.current = vm.$root.$mp.query.val
        } else {
          vm.current = 'tab1'
        }
      }
      vm.hanTabs()
    }, // 标签页初始化
    seekShopList (orderNo) {
      const vm = this
      let current = ''
      if (vm.current === 'tab1') {
        current = '1'
      } else if (vm.current === 'tab2') {
        current = '0'
      } else if (vm.current === 'tab3') {
        current = '3,7'
      } else if (vm.current === 'tab4') {
        current = '4,5,8'
      } else {
        current = '0,1,2,3,4,5,7,8'
      }
      vm.pageNo = 1
      vm.pagesNumCunt = 0
      vm.isShow = false
      vm.orderList = []
      vm._seekShopList(current, orderNo)
    }, // 搜索请求判断
    hanTabs () {
      const vm = this
      if (vm.current === 'tab1') {
        vm._findShopList('1', true)
      } else if (vm.current === 'tab2') {
        vm._findShopList('0', true)
      } else if (vm.current === 'tab3') {
        vm._findShopList('3,7', true)
      } else if (vm.current === 'tab4') {
        vm._findShopList('4,5,8', true)
      } else {
        vm._findShopList('0,1,2,3,4,5,7,8', false)
      }
    }, // tab操作
    _findShopList (state, type) {
      const vm = this
      let params = {
        state: state
      }
      if (type) {
        params.shopId = vm.$cookie.get('account').shopId
      } else {
        params.disShopId = vm.$cookie.get('account').shopId
      }
      FIND_SHOP_ORDER_PAGE(params, vm.pageNo, vm.pageSize)
        .then(r => {
          if (r.data.code === '0') {
            vm.pagesNum = r.data.data.pages
            for (let i = 0; i < r.data.data.list.length; i++) {
              if (vm.pagesNumCunt < vm.pagesNum) {
                if (vm.pageNo < 1) {
                  vm.orderList = r.data.data.list[i]
                } else {
                  vm.orderList.push(r.data.data.list[i])
                }
              }
            }
            if (vm.pagesNumCunt < vm.pagesNum) {
              vm.isShow = false
            } else {
              vm.isShow = true
            }
            vm.pageNo++
            vm.pagesNumCunt++
          } else {
            vm.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 这个就是到时候发请求的
    _seekShopList (state, orderNo) {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        state: state
      }
      if (!orderNo.length) {
        delete params.orderNo
        delete params.phone
      } else if (orderNo.length > 11) {
        params.orderNo = orderNo
      } else {
        params.phone = orderNo
      }
      FIND_SHOP_ORDER_PAGE(params, vm.pageNo, vm.pageSize)
        .then(r => {
          if (r.data.code === '0') {
            vm.pagesNum = r.data.data.pages
            for (let i = 0; i < r.data.data.list.length; i++) {
              if (vm.pagesNumCunt < vm.pagesNum) {
                if (vm.pageNo < 1) {
                  vm.orderList = r.data.data.list[i]
                } else {
                  vm.orderList.push(r.data.data.list[i])
                }
              }
            }
            if (vm.pagesNumCunt < vm.pagesNum) {
              vm.isShow = false
            } else {
              vm.isShow = true
            }
            vm.pageNo++
            vm.pagesNumCunt++
          } else {
            vm.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 搜索请求
    handleLoadMore () {
      if (!this.isShow) {
        this.hanTabs()
      }
    }, // 处理懒加载
    smallHintFrame (value) {
      wx.showToast({
        title: value,
        icon: 'none',
        duration: 2000
      })
    }, // 小提示框
    onUnInit () {
      this.seekModel = ''
      this.current = 'tab1'
      this.pageNo = 1
      this.pageSize = 10
      this.pagesNum = 0
      this.pagesNumCunt = 0
      this.isShow = false
      this.orderList = []
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.head {
  width: 375px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px $light-black;

  .seek {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .seekIoc {
      position: absolute;
      width: 14px;
      height: 14px;
      z-index: 1;
      top: 50%;
      left: 10px;
      transform: translate(0%, -50%);
    }
    .seekInput {
      width: 190px;
      background: #fff;
      border-radius: 25px;
      font-size: 12px;
      padding-left: 40px;
      color: #666;
      margin-right: 20px;
    }
    .seekLogo {
      width: 50px;
      height: 16px;
    }
  }
}
.tabInfo {
  .shopsList {
    width: 340px;
    height: 105px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    background: #fff;
    padding: 10px 5px;
    .shopsListLeft {
      display: flex;
      .shopsCont {
        width: 240px;
        height: 87px;
        font-size: 13px;
        line-height: 14px;
        color: #000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 5px;
        .money {
          color: #ff3033;
        }
        div {
          display: flex;
          justify-content: space-between;
          label {
            color: #a2a2a2;
          }
        }
      }
    }
    .shopsIcoBox {
      display: flex;
      align-items: center;
      font-size: 13px;
      margin-right: 10px;
      line-height: 14px;
      div {
        height: 87px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        label,
        p {
          color: #a2a2a2;
        }
        .stateColor {
          color: #f0ae27;
        }
        .stateColor2 {
          color: #3a7f3e;
        }
        .stateColor3 {
          color: #ff3033;
        }
      }

      // img {
      //   width: 5px;
      //   height: 10px;
      // }
    }
    .shopsXian {
      width: 96%;
      height: 1px;
      border-top: 1px solid #eee;
      position: absolute;
      bottom: 32px;
    }
  }
  .listHiti {
    width: 100%;
    height: 50px;
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 50px;
  }
}
</style>
